<script setup lang="ts">
import { copyText } from '@/utils/copyText'
import { ElMessage } from 'element-plus'

const props = defineProps<{
	show: boolean
	previewInfo: Record<string, string>
}>()

const emit = defineEmits<{
	'update:show': [val: boolean]
}>()

const activeName = ref(0)

function copyTextSuccess(val: string) {
	copyText(val)
	ElMessage.success('复制成功')
}
</script>

<template>
	<ElDialog
		:model-value="props.show"
		title="导入表"
		width="80%"
		:close-on-click-modal="false"
		body-class="preview-dialog_body"
		@update:modelValue="v => emit('update:show', v)"
	>
		<div class="h-[60vh] overflow-auto">
			<el-tabs v-model="activeName">
				<el-tab-pane
					v-for="(val, key, index) in previewInfo"
					:key="index"
					:label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
					:name="index"
				>
					<el-link
						underline="always"
						icon="DocumentCopy"
						style="float: right"
						@click="copyTextSuccess(val)"
					>
						&nbsp;复制
					</el-link>
					<pre>{{ val }}</pre>
				</el-tab-pane>
			</el-tabs>
		</div>
	</ElDialog>
</template>
